<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M917.333 928h-192a32 32 0 0 1-32-32V640a10.667 10.667 0 0 0-10.666-10.667H341.333A10.667 10.667 0 0 0 330.667 640v256a32 32 0 0 1-32 32h-192a32 32 0 0 1-32-32V409.6a116.693 116.693 0 0 1 54.613-99.2l320-202.027a117.76 117.76 0 0 1 125.227 0l320 202.027a116.693 116.693 0 0 1 54.826 99.2V896a32 32 0 0 1-32 32z m-160-64h128V409.6a53.12 53.12 0 0 0-24.96-45.013l-320-202.027a53.547 53.547 0 0 0-56.96 0l-320 202.027a53.12 53.12 0 0 0-24.746 45.013V864h128V640a74.667 74.667 0 0 1 74.666-74.667h341.334A74.667 74.667 0 0 1 757.333 640zM466.347 135.467z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M554.667 437.333h-85.334a32 32 0 0 1 0-64h85.334a32 32 0 0 1 0 64z m42.666 320H426.667a32 32 0 0 1 0-64h170.666a32 32 0 0 1 0 64z m0 128H426.667a32 32 0 0 1 0-64h170.666a32 32 0 0 1 0 64z' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
